<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户列表 - SmartWebHook</title>
    {{template "widgets/headfile.html" .}}
</head>
<body>
{{template "widgets/head.html" .}}
<div class="container">
    <div class="bs-docs-container">
        <div class="title">
            <h3>Member List</h3>
            <hr>
        </div>
        <div class="body">
            <table class="table" id="tableMemberList">
                <thead>
                <tr>
                    <th width="5%">#</th>
                    <th width="15%">Account</th>
                    <th>Email</th>
                    <th width="15%">Phone</th>
                    <th width="10%">Role</th>
                    <th width="10%">Status</th>
                    <th width="15%">Operate</th>
                </tr>
                </thead>
                <tbody>
                {{if .lists}}
                {{range $index,$item := .lists}}
                {{template "member/list_item.html" $item}}
                {{end}}
                {{end}}
                </tbody>
            </table>
        </div>
        <div class="body-botton text-center">
            <button class="btn btn-success btn-sm" id="btnAddMember" data-toggle="modal" data-target="#addMemberModal">添加新的 Member</button>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="addMemberModal" tabindex="-1" role="dialog" aria-labelledby="addMemberModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="{{urlfor "MemberController.Edit"}}" method="post" id="addMemberForm">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addMemberModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Account</label>
                    <input type="text" name="account" id="account" placeholder="Account" maxlength="50" class="form-control">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" name="password" id="password" placeholder="Password" maxlength="50" class="form-control">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="text" name="email" id="email" placeholder="Email" maxlength="100" class="form-control">
                </div>
                <div class="form-group">
                    <label>Phone</label>
                    <input type="text" name="phone" id="phone" placeholder="Phone" maxlength="20" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="btnSaveMember" data-load-text="saving">Save changes</button>
            </div>
            </form>
        </div>
    </div>
</div>
{{template "widgets/foot.html" .}}
<script type="text/javascript">
    $(function () {
        var addMemberModalCache = $("#addMemberModal").find(".modal-body").html();

        $("#addMemberModal").on("show.bs.modal",function () {
           $(this).find(".modal-body").html(addMemberModalCache);
        });

       $("#addMemberForm").ajaxForm({
            beforeSubmit : function () {
                var account = $.trim($("#account").val());
                if (account == '') {
                    $("#account").focus().closest(".form-group").addClass("has-error");
                    return false;
                }
                var password = $.trim($("#password").val());
                if (password == ""){
                    $("#password").focus().closest(".form-group").addClass("has-error");
                    return false;
                }
                $("#btnSaveMember").button("load");
            },
           success :function (res) {
                if(res.errcode == 0){
                    $("#addMemberModal").modal("hide");
                    $("#tableMemberList").find("tbody").prepend(res.data.view);

                }else{
                    alert(res.message);
                }
           },
           complete : function () {
               $("#btnSaveMember").button("reset");
           }
       });

       $("#tableMemberList").on("click",".delete-member-btn",function () {
          var url = $(this).attr("data-url");
            var $then = $(this).closest("tr");
            var $this = $(this);
            $this.attr("disabled","disabled");

          $.ajax({
              url : url,
              dataType :"json",
              success :function (res) {
                  if(res.errcode == 0){
                      $then.empty().remove();
                  }else{
                      alert(res.message);
                  }
              },complete :function () {
                $this.removeAttr("disabled");
              }
          });
       });
    });
</script>
</body>
</html>